import { useEffect, useRef } from "react"
import * as echarts from "echarts"

export default function BarEcharts({title}) {
    const chartRef = useRef()
    useEffect(() => {
        // 获取渲染图表dom节点
        const chartDom = chartRef.current
        // 实例化图表对象
        const myChart = echarts.init(chartDom)
        // 图表参数
        const option = {
            title: {
                text: title
            },
            xAxis: {
                type: "category",
                data: ["Vue", "React", "Angular"]
            },
            yAxis: {
                type: "value"
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: "bar"
                }
            ]
        }
        // 使用图表参数渲染图表
        option && myChart.setOption(option)
    },[title])
    return (
      <div ref={chartRef} className="barEcharts-container" style={{width: '500px', height: '400px'}}></div>
    )
}